<template>
  <div style="padding:30px;">
    <div class="search-div-bar">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <label class="label-input">任务名称</label>
            <el-input v-model="searchParam.jobName" class="searchParam-input" size="small" placeholder="请输入内容" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <label class="label-input">任务分组</label>
            <el-input v-model="searchParam.jobGroup" class="searchParam-input" size="small" placeholder="请输入内容" />
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearchButtonClick">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="action-div-bar">
      <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="handleAddButtonClick">新增</el-button>
      <!-- <el-button type="success" icon="el-icon-download" size="small" @click="handleExportButtonClick">导出</el-button> -->
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="100%"
    >
      <el-table-column type="index" width="100" />
      <el-table-column prop="jobName" label="任务名称" width="140" />
      <el-table-column prop="jobGroup" label="任务分组" width="120" />
      <el-table-column prop="jobClassName" label="执行类" width="280" />
      <el-table-column prop="cronExpression" label="表达式" />
      <el-table-column prop="triggerState" label="执行状态" />
      <el-table-column prop="description" label="任务描述" width="120" />
      <el-table-column
        fixed="right"
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="editRow(scope.$index, tableData)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="triggerRow(scope.$index, tableData)"
          >触发</el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="runOrStopRow(scope.$index, tableData)"
          >
            <span v-if="scope.row.triggerState=='RUNNING'">停止</span>
            <span v-if="scope.row.triggerState=='PAUSED'">恢复</span>
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="removeRow(scope.$index, tableData)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-div">
      <pagination
        :page="searchParam.page"
        :page-size="searchParam.pageSize"
        :total="searchParam.total"
        :page-sizes="pageSizes"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      />
    </div>

    <div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :show-close="false">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务名" prop="jobName">
                <el-input v-model="form.jobName" class="searchParam-input" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务分组" prop="jobGroup">
                <el-input v-model="form.jobGroup" class="searchParam-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="执行类" prop="jobClassName">
                <el-input v-model="form.jobClassName" style="width:670px" class="searchParam-input" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="表达式" prop="cronExpression">
                <el-input v-model="form.cronExpression" class="searchParam-input" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="描述" prop="description">
                <el-input v-model="form.description" class="searchParam-input" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormCancel()">取 消</el-button>
          <el-button type="primary" @click="dialogFormSubmit()">保 存</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import pagination from '@/components/Pagination/pagination'
import { getList, triggerJob, runOrStopJob, addJob, editJob, removeJob, validateJobNameRepeat } from '@/api/job'

export default {
  name: 'Job',
  components: {
    pagination
  },
  data() {
    const validateJobName = (rule, value, callback) => {
      const validateValue = { 'id': this.form.id, 'jobName': value }
      if (value === null) {
        callback(new Error('请输入任务名'))
      } else {
        validateJobNameRepeat(validateValue).then(res => {
          if (res.data) {
            callback(new Error('任务名已存在'))
          } else {
            callback()
          }
        })
      }
    }
    return {
      tableData: [],
      searchParam: {
        jobName: null,
        jobGroup: null,
        // 当前页
        page: 1,
        // 每页多少条
        pageSize: 6,
        // 一共多少条数据
        total: 0
      },
      pageSizes: [3, 6, 9],
      form: {
        id: 0,
        jobName: null,
        jobGroup: null,
        jobClassName: null,
        cronExpression: null,
        description: null
      },
      rules: {
        jobName: [
          { required: true, validator: validateJobName, trigger: 'blur' }
        ],
        jobGroup: [
          { required: true, message: '请输入任务分组', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: '请输入自动任务表达式', trigger: 'blur' }
        ],
        jobClassName: [
          { required: true, message: '请输入执行类名', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogTitle: ''
    }
  },
  mounted() {
    this.getJobList(this.searchParam)
  },
  methods: {
    getJobList: function(param) {
      getList(param).then(res => {
        this.tableData = res.data.pageData
        this.searchParam.total = res.data.total
      })
    },
    pageChange: function(page) {
      // 当前页发生变化时
      this.searchParam.page = page
      this.getJobList(this.searchParam)
    },
    pageSizeChange: function(pageSize) {
      // 一页多少条发生变化时
      this.searchParam.pageSize = pageSize
      this.getJobList(this.searchParam)
    },
    handleSearchButtonClick: function() {
      this.getJobList(this.searchParam)
    },
    editRow: function(index, data) {
      this.dialogTitle = '编辑'
      this.form = data[index]
      this.form.oldJobName = data[index].jobName
      this.form.oldJobGroup = data[index].jobGroup
      this.dialogFormVisible = true
    },
    triggerRow: function(index, data) {
      triggerJob(data[index])
    },
    runOrStopRow: function(index, data) {
      const parem = data[index]
      parem.page = this.searchParam.page
      parem.pageSize = this.searchParam.pageSize
      runOrStopJob(data[index]).then(() => {
        this.getJobList(this.searchParam)
      })
    },
    removeRow: function(index, data) {
      this.$confirm(`确定要删除【${data[index].jobName}】这个自动任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeJob(data[index]).then(() => {
          this.getJobList(this.searchParam)
        })
      }).catch(() => {
        console.log('取消操作')
      })
    },
    handleAddButtonClick: function() {
      // 清除form值
      const clearForm = {
        id: 0,
        jobName: null,
        jobGroup: null,
        jobClassName: null,
        cronExpression: null,
        description: null
      }
      this.form = clearForm
      this.dialogTitle = '新增'
      this.dialogFormVisible = true
    },
    // handleExportButtonClick: function() {
    //   const param = this.searchParam
    //   exportExcel(param)
    // },
    dialogFormSubmit: function() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.dialogTitle === '新增') {
            addJob(this.form).then(res => {
              this.getJobList(this.searchParam)
            })
          }
          if (this.dialogTitle === '编辑') {
            editJob(this.form).then(res => {
              this.getJobList(this.searchParam)
            })
          }
          this.dialogFormVisible = false
        }
      })
    },
    dialogFormCancel: function() {
      this.resetForm('ruleForm')
      this.getJobList(this.searchParam)
      this.dialogFormVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getUuid: function() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return (S4() + S4())
    }
  }
}
</script>

<style scope>
  .search-div-bar {
    margin-bottom: 20px;
  }
  .label-input {
    padding-right: 50px;
    color: #909399;
  }
  .searchParam-input {
    width: 200px;
  }
  .pagination-div {
    margin-top: 20px;
    text-align: center;
  }
</style>
